<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./utils/flexible.js"></script>
</head>
<style>
    *{
        padding:0;
        margin:0;
        list-style:none;
        text-decoration: none;
        box-sizing: border-box;
    }
    #header{
        background:#1d6dff;
        overflow:hidden;
        width:100%;
        color:#fff;
        text-align:center;
        font-size: .5333rem;
        line-height: .5867rem;
        font-weight:bolder;
        padding:0.1333rem 0;
       height: 1.3333rem;
    }
    #header .left a{
        float:left;
        width: .5333rem;
        height: .7616rem;
        text-decoration:none;
        color:#fff;
    }
     #header .right {
         float: right;
         padding: 0.1867rem;
    }
    .container p .p1{
        width: 5.3333rem;
        /* position:absolute;
        right: .2133rem;
        top: 2rem; */
        float: right;
    }
    .container .p2{
        width: 9.3333rem;
        display:inline-block;
    }
    .container p{
        margin:0 0 .2667rem;
        font-size: .48rem;
        display:block;
        overflow:hidden;
    }
    .container .city{
            /* height:1.196rem; */
            width:100%;
            text-align:center;
            width: 9.3333rem;
            /* color:black; */
            font-size: .4267rem;
    }
    #disstorck li a span strong{
        color: red;
    }
    #disstorck li a span{
        color:black;
       
    }
    #disstorck li{
        border: .0267rem solid #ccc;
        background-color:#f4f4f4;
        text-align:center;
        width:4.8rem;
        overflow:hidden;
    }
    .buy a{
        background:#1d6dff;
        text-align: center;
        display: block;
        line-height: .9067rem;
        font-size: .4267rem;
        font-weight: bold;
        color:#fff;
        border-radius: .2667rem;
    }
    .buy{
        margin-bottom: .2667rem;
        display: block;
    }
    .pict{
        text-align: center;
        display: block;
    }
    .pict img{
        width:95%;
        padding: .2667rem;
        vertical-align: middle;
        border: 0;
    }
    .textarea{
       position:relative;
       padding: .2667rem;
       display:block;
    }
    .textarea textarea{
        padding: .2667rem;
        width:100%;
        margin:0 auto;
        height: 2.6667rem;
        border: .0267rem solid #ccc;
        outline:none;
    }
    .textarea .empty{
        position:relative;
        height: 1.3333rem;
        width:100%;
        background-color: #ccc;
    }
    .textarea .empty a{
        display:block;
        height: 1.4667rem;
        width: 3.2rem;
        background-color: #1d6dff;
        line-height: 1.4667rem;
        clear: #fff;
        text-align: center;
        position: absolute;
        right:0;
        bottom: -0.0267rem;
    }
    .textarea .empty a:hover{
        text-decoration: none;
    }
    #footer{
        background-color: #f4f4f4;
        /* overflow: hidden; */
    }
    #footer .more{
        height: 1.3333rem;
        padding: .2667rem;
    }
    #footer .more a{
        display:block;
        font-size: .3467rem;
        line-height: .8rem;
        text-align: center;
        border-radius: .1333rem;
        border: .0267rem solid #ddd;
    }
    #footer .chart{
        background-color: #1d6dff;
        margin-top: .2667rem;
        margin-bottom: .16rem;
    }
    #footer .chart .rend{
        color:#fff;
        display:block;
        font:bolder .48rem/.9333rem;
        padding-left: .2667rem;
    }
    #footer .row{
        height: .96rem;
        margin-top: .2667rem;
        border-top: .0267rem solid #c4c4c4;
        border-bottom: .0267rem solid #c4c4c4;
        margin: 0 auto;
        padding: 0 .4rem;
        /* float: left; */
    }
    #footer .row a{
        display:block;
        text-decoration: none;
        height: .88rem;
        line-height: .88rem;
        text-align: center;
        font-size: .3733rem;
        border-right: .0267rem solid #c4c4c4;
        float:left;
        cursor: pointer;
        margin:0 .2667rem;
        text-align: center;
        color: #666;
    }
</style>
<body>
    <header id="header">
        <div class="left">
        <a href="#">
            〈
        </a>
        </div>
        省钱控-最新优惠
         <div class="right">
            <a href="#"><img src="./images/header_app.png" alt="" width="34"></a>    
         </div>
    </header>
    <div class="container">
        
    </div>
    <div class="buy">
        <a href="#">前往购买</a>
    </div>
    <section class="pict">
        <img src="./images/mmbweixin2.png" alt="">
    </section>
   <section class="textarea">
       <textarea></textarea>
       <div class="empty">
           <a href="#">提交评论</a>
       </div>
   </section>
    <div class="con">

    </div>
    <div id="footer">
    <div class="more">
        <a href="#">更多优惠信息</a>
    </div>
    <div class="chart">
    <div class="rend">品牌排行</div>
    </div>
    <div class="row">
        <a href="#">登入</a>
        <a href="#">注册</a>
        <a href="#">返回顶部</a>
    </div>
</div>
</body>
</html>
<script src="./utils/utils.js"></script>
<script>
    let container = document.querySelector('.container')


let id = getQueryString('productid');
// console.log(id)

fetch('http://chst.vip:1234/api/getmoneyctrlproduct?productid=' + id)
    .then(body => body.json())
    .then(res => {
        console.log(res)
        let r = res.result[0];
        console.log(r)
        let regExp = /(?<=imgurl=)[^'"]*/;
        let url = r.productImg2.match(regExp);

        console.log(url)
        let el = `<h4>${r.productName}</h4>
        <span>${r.productTime}</span>
        <span>${r.productTips}</span>
    <p>${r.productInfo}${r.productInfo1}
        <img src=${url[0]} class="p1">
        </p>
    <img src=${url[0]} class="p2">
    <div>${r.productCity}</div>
    `

        container.innerHTML = el;
    })
</script>